<template>
  <div class="input-picture" @click="inputPicture">
    <img :src="props.headPic" width="100" height="100" alt="">
    <span class="buts">
      <el-icon :size="25" color="#ffffff">
        <CirclePlusFilled />
      </el-icon>
      <p style="font-size: 1rem; color: #fff;">上传头像</p>
    </span>
  </div>
</template>
<script setup lang="ts">
import { ElNotification } from "element-plus";
import { ref } from "vue";

const props = defineProps({
  custom: {
    type: Boolean,
    default: false,
  },
  headPic: {
    type: String,
    default: "",
  },
  showDeleteButton: {
    type: Boolean,
    default: true,
  },
});

const inputFileData = ref<File|null>(null);
const toWindowUrl = ref<string>("");

const emit = defineEmits(["upload-success"]);

const inputPicture = () => {
  let inputFile:any = document.createElement("input");
  inputFile.type = "file";
  inputFile.accept = "image/*";
  inputFile.onchange = () => {
    const file = inputFile.files && inputFile.files[0];
    if (file && file?.size > 2048000) {
      return ElNotification.warning({
        title: "Warning",
        message: "图片不能大于2M",
        offset: 100,
      });
    }
    inputFileData.value = inputFile?.files?.[0] || null;
    const windowURL = window.URL || window.webkitURL; // 兼容操作
    toWindowUrl.value = windowURL.createObjectURL(inputFile?.files?.[0]);
    emit("upload-success", inputFileData.value);
    setTimeout(() => {
      inputFile = null;
    }, 200);
  };
  inputFile.click();
};
</script>
<style lang="scss">
$picSize: 100px;
.input-picture {
  position: relative;
  @include flex();
  font-size: 2rem;
  cursor: pointer;
  width: 100px;
  height: 100px;
  z-index: 2;

  img {
    position: absolute;
    width: $picSize;
    height: $picSize;
    left: 0;
    border-radius: 50%;
  }
  .buts {
    width: 6rem;
    display: none;
  }
}
.input-picture:hover {
  .buts {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .el-icon {
      z-index: 1000;
      filter: brightness(150%) !important;
    }
    p {
      z-index: 1000;
    }
  }
}
</style>
